<template>
  <div class="hs-panel hs-bg-card">

    <el-table :data="list"
              v-loading.body="listLoading"
              border fit highlight-current-row
              style="width: 100%;margin: 10px 0">
      <el-table-column type="index" width="50" label="序号"></el-table-column>

      <el-table-column width="140" label="用户" prop="username">
      </el-table-column>
      <el-table-column width="180" align="center" label="Seesion" prop="sessionId">
      </el-table-column>
      <el-table-column width="160" align="center" label="ip" prop="ip">
      </el-table-column>
      <el-table-column width="180" align="center" label="ip地址" prop="location">
      </el-table-column>
      <el-table-column width="160" align="center" label="登录时间" prop="loginTime">
      </el-table-column>
      <el-table-column align="center" label="操作" fixed="right" width="100">
        <template slot-scope="scope">
          <el-button v-if="sessionManager_btn_del"
                     size="mini" type="text"
                     @click="handleDelete(scope.row)">下线
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-show="!listLoading && total > 20" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="listQuery.pageNum"
                     :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { page } from 'api/admin/session'

export default {
  name: 'gateLog',
  data () {
    return {
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        username: undefined
      },
      sessionManager_btn_del: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.listLoading = true
      page(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleSizeChange (val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.listQuery.pageNum = val
      this.getList()
    }
  }
}
</script>
